<template>
  <div>
   <Parallax></Parallax>
    <!-- <div>
      <el-carousel>
        <el-carousel-item v-for="(item, index) in images" :key="index">
          <img :src="`/${item.src}`" alt="" style="width:100%">
        </el-carousel-item>
      </el-carousel>
    </div> -->

    <div class="section-container"><!--能力目录描述-->
      <!-- 第一部分：两行文字 -->
      <div class="text-section">
        <h2 class="large-text">能力目录 Ability Directory</h2>
        <p class="small-text">能力聚合、服务共享、实现省厅、地市及第三方应用的接入和服务调用</p>
      </div>
      <!-- 第二部分：五个正方形部分 -->
      <div class="service-section">
        <div class="service-row">
          <div class=" blue-box">
            <span>描述：本接口是提供给第三方营业系统查询终身学习账号系统的用户信息</span>
          </div>
        </div>
        <div class="service-row" v-for="(service, index) in services" :key="service.id">
          <div class="service-box" @click="navigateToService(service)">
            <img :src="`/${service.image}`" alt="" class="service-icon">
            <div class="service-content">
              <h3 class="service-title">{{ service.name }}</h3>
              <p class="service-description">{{ service.description }}</p>
            </div>
          </div>
          <template v-if="index !== services.length - 1">
            <div class="vertical-divider"></div>
          </template>
        </div>
      </div>
      <!-- <div class="service-row">
          <div class=" blue-box">
            <span>描述：本接口是提供给第三方营业系统查询终身学习账号系统的用户信息</span>
          </div>
        </div> -->
      <!-- 第三部分：右侧蓝色按钮 -->
      <div class="button-section">
        <el-button type="primary" @click="onButtonClick">查看更多</el-button>
      </div>
    </div>

    <div class="develop-containerbox"><!--开发资源描述-->
      <!-- 第一部分：两行文字 -->
      <div class="text-section">
        <h2 class="large-text">开发资源 Development Resources</h2>
        <p class="small-text">提供丰富的开发资源和远程调试环境,助力提升开发效率</p>
      </div>
      <!--第二部分：图片文字描述-->
      <div style="display:flex;justify-content: space-evenly;">
        <div class="develop-row" v-for="(develop, index) in develops" :key="develop.id">
          <div class="develop-box">
            <img :src="`/${develop.image}`" alt="" class="develop-icon">
            <div class="develop-content">
              <h3 class="develop-title">{{ develop.name }}</h3>
              <p class="develop-gs">{{ develop.gs }}</p>
              <p class="develop-description">{{ develop.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="case-container"><!--案例中心描述-->
      <div class="text-section">
        <h2 class="large-text">案例中心 Case Center</h2>
      </div>
      <div class="long-buttons-container">
        <div>
          <div class="long-button" v-for="(button, index) in buttons" :key="index" @click="handleButtonClick(index)"
            :class="{ 'active': index === activeButton }">
            <div class="button-content">
              <h2 class="button-text">{{ button.text }}</h2>
              <p class="button-gs">{{ button.gs }}</p>
            </div>
          </div>
        </div>
        <div>
          <div v-for="button in buttons">
            <img v-if="activeButton == button.index" :src="button.image" style="width:90%" alt="Button Image">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Parallax from "./components/lunbo.vue";
export default {
  components: {
    Parallax
  },
  data() {
    return {
      images: [
        { src: 'banner.png' },
        { src: 'banner1.jpg' },
        { src: 'banner2.jpg' },
      ],
      services: [
        { id: 1, image: 'ad_2.png', name: '终身学习账号身份证验证', description: '提供方：xxxxxx', link: '#' },
        { id: 2, image: 'ad_3.png', name: '高校学分互认接口', description: '提供方：xxxxxx', link: '#' },
        { id: 3, image: 'ad_4.png', name: '终身学习账号认证', description: '提供方：xxxxxx', link: '#' },
        { id: 4, image: 'ad_5.png', name: '学籍及教师信息查询', description: '提供方：xxxxxx', link: '#' },
      ],
      develops: [
        { id: 1, image: 'kaifawendang.png', name: '开发文档', gs: '平台概述', description: '开放第三方API接囗,推进个性化应系统构建;提供定制化"和物"APP,加速个性化只能应用生成。' },
        { id: 2, image: 'daimashili.png', name: '代码示例', gs: '平台概述', description: '作为PaaS层OneNET位SaaS层和S层搭建连接桥梁分别向上下游提供中间层核心能力。' },
        { id: 3, image: 'ziaxianceshi .png', name: '在线测试', gs: '平台概述', description: '通过体现相关能力，学习教程和动手在线测试、快速了解江西省能力平台开放的能力.' },
      ],
      activeButton: 0,
      buttons: [
        { text: "终身学习账号系统", gs: '对外门户，为学生和老师提供服务', image: '/Group 2.png', index: 0 },
        { text: "数据中心", gs: '能力的主要提供者，专注数据收集', image: '/产品2.jpg', index: 1 },
        { text: "跨校选课", gs: '转为大学生提供，跨校选课平台', image: '/产品3.jpg', index: 2 },
        { text: "综合素质评价", gs: '对高中生的综合素质信息采集和评价', image: '/产品4.jpg', index: 3 },
      ],
    };
  },
  methods: {

    navigateToService(service) {
      window.location.href = service.link;// 实现跳转逻辑
    },
    onButtonClick() {
      console.log('按钮被点击');// 实现按钮点击逻辑
    },
    handleButtonClick(index) {
      this.activeButton = index;
    },
  },
  mounted() {
   
  }
};
</script>

<style scoped lang="scss">

::v-deep .el-carousel__container {
  height: 415px;
}

.section-container {
  background-color: #F2F6FC;
  padding: 20px;
}

.case-container {
  background-color: #F2F6FC;
  padding-top: 20px;
}

.text-section {
  text-align: center;
  color: gray;
  margin-top: 20px;
}

.large-text {
  font-size: 22px;
  font-weight: bold;
}

.small-text {
  font-size: 12px;
}

.service-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.service-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
  margin:20px;
}

.service-box {
  width: 100%;
  margin: 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.service-icon {
  width: 30%;
  height: auto;
  margin: auto;
  margin-bottom: 5px;
}

.service-content {
  width: 150px;
}

.service-title {
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: bold;
  height:55px;
  padding-top:10px;
}

.service-description {
  font-size: 9px;
  color: gray;
}

.blue-box {
  width: 150px;
  height: 150px;
  font-size: 13px;
  background-color: #d7e7f8;
  color: #000;
  border: 1px solid #7bcefb;
  display: flex;
  padding: 12px;
  /* 使内部元素可以垂直居中 */
  align-items: center;
  border-radius: 10px;
  /* 文字居中 */

}

.vertical-divider {
  width: 2px;
  height: 150px;
  background-color: #e0dcdc;
  margin-left: 20px;
}

.button-section {
  text-align: right;
  margin-top: 20px;
  margin-right: 40px;
}
.develop-containerbox{
  padding-top:20px;
  padding-bottom: 50px;
}
.develop-row{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}


.develop-box {
  margin-top: 30px;
  // margin-left: 50px;
  display: flex;
  align-items: center;
}

.develop-content {
  width:140px;
  text-align: left;
}

.develop-icon {
  width: 200px;
  margin-bottom: 10px;
  margin-right: 20px;
}


.develop-title {
  font-size: 18px;
  font-weight: bold;
  margin-top: -20px;
  margin-bottom: 1px;
  color: rgb(85, 85, 85);
}

.develop-gs {
  font-size: 12px;
  color: gray;
}

.develop-description {
  font-size: 12px;
  color: rgb(93, 92, 92);
}

.long-buttons-container {
  margin-left:15%;
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
 
}

.long-button {
  margin: 10px 60px;
  width: 250px;
  height: 90px;
  position: relative;
  padding: 10px 10px;
  cursor: pointer;
  background-color: white;
  transition: all 0.3s;
  flex-direction: column;

}

.active {
  background-color: #c5e7f9;
  color: white;
}

.button-content {
  margin: 10px;
  height: 60px;
  align-items: center;
}

.button-text {
  font-size: 15px;
  color: rgb(55, 132, 214);
  font-weight: bold;
  margin-top: -2px;
}

.button-gs {
  font-size: 12px;
  color: rgb(115, 169, 231);
  margin-top: -7px;
}

.long-button img {
  position: absolute;
  right: 0;
  top: 0;
  height: 50%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s;
}

.long-button.active img {
  opacity: 1;
}
</style>